<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSzmwrQ90SNUILzGRpsBiaa860gfQ"
      type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    //声明GMap对象
    var map;
    
    function load()
    {
      if (GBrowserIsCompatible())
      {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(39.92, 116.46), 4);
        loadXmlData("example.xml");
      }
    }
    
    //加载折线，返回值为被添加的折线
    function addPolyline(node){
      //加载边线颜色，宽度，透明度
      var color = node.getAttribute("color");
      var width  = parseFloat(node.getAttribute("width"));
      var opacity  = parseFloat(node.getAttribute("opacity"));
      
      //加载顶点
      var points = node.getElementsByTagName("point");
      var pts = [];
      for (var i = 0; i < points.length; i++)
      {
         pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                             parseFloat(points[i].getAttribute("lng")));
      }
      
      //添加折线
      var polyline = new GPolyline(pts, color, width, opacity);
      map.addOverlay(polyline);
      return polyline;
    }
    
    //加载多边形，返回值为被添加的多边形
    function addPolygon(node)
    {
      //加载边线颜色，宽度，透明度
      var color = node.getAttribute("color");
      var width  = parseFloat(node.getAttribute("width"));
      var opacity  = parseFloat(node.getAttribute("opacity"));
      
      //加载填充颜色，透明度
      var fillcolor  = node.getAttribute("fillcolor");
      var fillopacity  = parseFloat(node.getAttribute("fillopacity"));
      
      //加载顶点
      var points = node.getElementsByTagName("point");
      var pts = [];
      for (var i = 0; i < points.length; i++)
      {
         pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                             parseFloat(points[i].getAttribute("lng")));
      }
      
      //添加多边形
      var polygon = new GPolygon(pts, color, width, opacity, fillcolor, fillopacity);
      map.addOverlay(polygon);
      return polygon;
    }
    
    function loadXmlData(xmlfile)
    {
      //创建GXmlHttp
      var request = GXmlHttp.create();
      request.open("GET", xmlfile, true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          
          // ========= 获取polyline节点 ===========
          var polylines = xmlDoc.documentElement.getElementsByTagName("polyline");
          // 处理每一个节点
          for (var i = 0; i < polylines.length; i++)
          {
            addPolyline(polylines[i]);
          }
          // ========= 获取polylgon节点 ===========
          var polygon = xmlDoc.documentElement.getElementsByTagName("polygon");
          // 处理每一个节点
          for (var i = 0; i < polylines.length; i++)
          {
            addPolygon(polygon[i]);
          }
          // ================================================
        }
      }
      request.send(null);
    }
    
    
//]]>
    </script>
  </head>
  <!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄露-->
  <body onload="load()" onunload="GUnload()">
    <!--以下id为map的DIV元素即为Google地图的容器-->
    <div id="map" style="width: 500px; height: 400px;"></div>
  </body>
</html>
